<template>
  <div class="div">
    <div class="div1">
      <el-form label-width="80px">
        <el-form-item label="用户名:">
          <span>{{ user.name }}</span>
        </el-form-item>
        <el-form-item label="账号:">
          <span>{{ user.account }}</span>
        </el-form-item>
        <el-form-item label="默认地址:">
          <span>{{ user.defaultTraderPlace }}</span>
        </el-form-item>
        <el-form-item label="电话:">
          <span>{{ user.tele }}</span>
        </el-form-item>
        <el-radio-button class="btn" @click="open">
          修改
        </el-radio-button>
      </el-form>
    </div>

    <el-dialog v-model="changeInfo" title="修改信息" :before-close="close">
      <el-form ref="form" :model="userChange" label-width="120px">
        <el-form-item class="item" label="用户名:" prop="name">
          <el-input
              v-model="userChange.name"
              type="name"
              placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item class="item" label="密码:" prop="Password">
          <el-input
              v-model="userChange.password"
              type="password"
              placeholder="请输入密码"
              show-password
          />
        </el-form-item>
        <el-form-item class="item" label="默认地址:" prop="address">
          <el-input
              v-model="userChange.defaultTraderPlace"
              type="address"
              placeholder="请确认默认地址"
          />
        </el-form-item>
        <el-form-item class="item" label="电话:" prop="tel">
          <el-input
              v-model="userChange.tele"
              type="tel"
              placeholder="请输入电话"
          />
        </el-form-item>
        <el-form-item class="submit">
          <el-button type="primary" @click="change">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "UserInfo",
  data() {
    return {
      changeInfo: false,
      user: {
        name: '',
        password: 0,
        defaultTraderPlace: "",
        tele: '',
      },
      userChange: {
        name: '',
        password: '',
        defaultTraderPlace: '',
        tele: '',
      },
    };
  },
  created() {
    this.getUser()
  },
  methods: {
    open() {
      this.changeInfo = true;
    },
    getUser() {
      request.get("http://localhost:8082/user/getUserInfo").then(res => {
        if (res.flag) {
          this.user = res.data
          this.userChange = res.data
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg)
          this.account = ''
          this.password = ''
        }
      })
    },
    change() {
      request.post("http://localhost:8082/user/updateInfo",this.userChange).then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.changeInfo = false
        } else {
          this.$message.error(res.msg)
          this.account = ''
          this.password = ''
        }
      })
    }
  }
}
</script>

<style scoped>

.div {
  background-color: #E0EEE0;
}

.div1 {
  position: absolute;
  left: 35%;
  right: 25%;
  top: 20%;
  bottom: 25%;
  text-align: center;
  line-height: 80px;
  padding: 80px;
}

.btn {
  position: absolute;
  left: 25%;
}
</style>
